<template>
	<div id="search">
		<nav-tab activeColor="#3A3A3A">
			<header-item>
				<div class="header-nav2" slot="header-sc">
					<div class="header-ts">全部</div>
					<div class="sanjiaox"></div>
					<input type="text" class="input" placeholder="223333333"/>
				</div>
				<div class="header-nav3" slot="header-xingx" @click="quxiao">
					<div>取消</div>
				</div>
			</header-item>
		</nav-tab>
		<div class="guanjianzi">
			<van-cell>
				<template #title>
					<span class="custom-title">历史搜索</span>
				</template>
				<template #right-icon>
					<van-icon name="delete-o" size="18px" color="white" />
				</template>
			</van-cell>
			<div class="gjzkdoe">
				<div class="mybtn">招招盈</div>
				<div class="mybtn">年度账单</div>
				<div class="mybtn">年度账单</div>
			</div>
		
				<van-cell >
					<template #title>
						<span class="custom-title">热门搜索</span>
					</template>
				</van-cell>
		
			<div class="renmen">
				<div class="renmen-btn">第一套房怎么买？</div>
				<div class="renmen-btn">信用卡“赚钱”攻略</div>
				<div class="renmen-btn">五险一金新规</div>
				<div class="renmen-btn">年轻人理？</div>
				<div class="renmen-btn">第一桶金</div>
			</div>
		</div>
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import {
		Cell,
		CellGroup,
		Tag,
		Icon,
		Button
	} from 'vant';
	export default {
		methods:{
			quxiao(){
				this.$router.go(-1)
			}
		},
		components: {
			NavTab,
			HeaderItem,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Tag.name]: Tag,
			[Icon.name]: Icon,
			[Button.name]: Button
		}
	}
</script>

<style lang="less" scoped>
	#search {
		width: 100vw;
		position: fixed;
		height: 100%;
		background-color: #6D6D6D;
	}

	.header-nav2 {
		display: flex;
		align-items: center;
		// color: white;
	}

	.header-ts {
		position: absolute;
		left: 10px;
		font-size: 14px;
		padding-top: 2px;
		color: white;

	}

	.header-nav3 {
		font-size: 16px;
	}

	.input {
		width: 310px;
		padding-left: 65px;
		opacity: 0.5;
	}

	.sanjiaox {
		width: 0;
		height: 0;
		border-top: 8px solid white;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		position: absolute;
		left: 45px;
	}

	.guanjianzi {
		.custom-title {
			margin-right: 4px;
			font-size: 16px;
			color: white;
		}

		margin-top: 45px;

		.gjzkdoe {
			.mybtn {
				display: inline-block;
				font-size: 14px;
				color: #EBEBE4;
				border: 1px solid #EBEBE4;
				padding: 5.5px 8px;
				border-radius: 3px;
				margin: 10px;
			}

		}
		.van-cell{
			background-color: #6D6D6D;
		}

		.renmen {
			.renmen-btn {
				display: inline-block;
				font-size: 14px;
				color: #EBEBE4;
				border: 1px solid #EBEBE4;
				padding: 5.5px 8px;
				border-radius: 3px;
				margin: 10px;
				position: relative;
				&::after {
					content: "";
					display: inline-block;
					width: 0;
					height: 0;
					border-left: 10px solid #F6514B ;
					border-bottom: 10px solid transparent;
					border-right: 10px solid transparent;
					position: absolute;
					left:0px;
					top: 0;
				}
			}


		}
	}
</style>
